<template>
		<view class="wrap">
			<view class="page-box" v-if="myInfos.length == 0">
				<view class="centre">
					<image src="../../static/暂无检测数据.webp" style="margin-left: 10%;" mode="widthFix"></image>
				</view>
			</view>
			<view class="page-box" v-else>
				<view style="display: flex;flex-direction: row;justify-content:space-between ">
					<view class="left_infos">
							<view v-for="(item, index) in myInfos" :key="index">
									<!-- 卡片内容 -->
										<view v-if="index % 2 == 1" class="record-card" @tap="navigateToDetail(item)">
											<view class="title u-line-2 text-bold">时间：{{ item.recordData }}</view>
											<view style="height: 15rpx;"></view>
											<view class="type">坐姿状态： {{ item.msg }}</view>
											<view>
												<image class="img" v-if="item.msg==='坐姿异常'" src="../../static/cry.png"></image>
												<image class="img" v-else src="../../static/smile.png"></image>
											</view>
										</view>
							</view>
					</view>
					<view class="right_infos">
							<view v-for="(item, index) in myInfos" :key="index">
									<!-- 卡片内容 -->
										<view v-if="index % 2 == 0" class="record-card"  @tap="navigateToDetail(item)">
											<view class="title u-line-2 text-bold">时间：{{ item.recordData }}</view>
											<view style="height: 15rpx;"></view>
											<view class="type">坐姿状态： {{ item.msg }}</view>
											<view>
												<image class="img" v-if="item.msg==='坐姿异常'" src="../../static/cry.png"></image>
												<image class="img" v-else src="../../static/smile.png"></image>
											</view>
										</view>
							</view>
					</view>
				</view>
			</view>
			
			<view style="margin-top: 120rpx; height: 1rpx;"></view>
				
		</view>
</template>

<script>
import UniStorage from '../../common/UniStorage.js';
export default {
	name:"sitting-infos",
	props : ['myInfos'],
	data() {
		return {
			percent: 50,
			activeColor: '#0081ff',
			striped: false,
			stripedActive: false,
			leftItems: [],
			rightItems: [],
			current: 0,
			swiperCurrent: 0,
			tabsHeight: 0,
			dx: 0
		};
	},
	onLoad() {
	},
	
	methods: {
		goClass(){
			uni.showToast({
			    title: '没有权限～',
			    duration: 2000,
				icon: 'none'
			});
		},
		navigateToDetail(item) {
			console.log(item)
			uni.navigateTo({
				url: `/pages/sitting-info-detail/sitting-info-detail?recordData=${encodeURIComponent(item.recordData)}&msg=${encodeURIComponent(item.msg)}&sittingTime=${encodeURIComponent(item.sittingTime)}&errorPostureTime=${encodeURIComponent(item.errorPostureTime)}`
			});
		}
	}
};
</script>
<style lang="scss" scoped>
/* #ifndef H5 */
page {
	height: 100%;
	background-color: #f2f2f2;
}
/* #endif */
</style>
<style scoped>
.record-card {
	margin-bottom: 40rpx;
	width: 325rpx;
	height: 200rpx;
	background-color: white;
	border-radius: 20rpx;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	z-index: 10;
	transition: box-shadow 0.3s;
}
.record-card:hover {
  box-shadow: 0 0 10rpx 0 rgba(255, 255, 0, 0.5); 
  transition: box-shadow 0.5s;
}
.wrap {
	display: flex;
	flex-direction: column;
	height: 100%;
	width: 100%;
}
.swiper-box {
	flex: 1;
}
.swiper-item {
	height: 100%;
}
.page-box {
	
}

.centre {
	align-items: center;
	justify-content: center;
}

.left_infos {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 48%;
}
.right_infos {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 48%;
}
.img {
	width: 100rpx;
	height: 100rpx;
}
</style>

